<template>
  <div class="app-container">
    <el-form :model="queryParam" ref="queryForm" :inline="true">
      <el-form-item label="题目：">
        <el-input v-model="queryParam.content" clearable></el-input>
      </el-form-item>
      <el-form-item label="考点：">
        <el-input v-model="queryParam.tag" clearable></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitSearch">查询</el-button>
      </el-form-item>
    </el-form>
    <div style="height: 300px; border: 1px solid #eee">
      <el-row>
        <el-col :span="12">
          <el-table :data="tableData" :show-header="false">
            <el-table-column prop="content" label="题目">
              <template slot-scope="scope">
                <p v-html="scope.row.content"></p>
              </template>
            </el-table-column>
            <el-table-column label="操作" width="120">
              <template slot-scope="scope">
                <el-checkbox
                  class="demo-checkbox"
                  v-model="checked"
                  @change="checkSelectAdd(scope.row)"
                  >加入</el-checkbox
                >
              </template>
            </el-table-column>
          </el-table>
        </el-col>
        <el-col :span="12">
          <el-table :data="selectData" :show-header="false">
            <el-table-column label="题目">
              <template slot-scope="scope">
                <p v-html="scope.row.content"></p>
              </template>
            </el-table-column>
            <el-table-column label="操作" width="120">
              <template slot-scope="scope">
                <!--修改按钮-->
                <el-tooltip
                  effect="dark"
                  content="删除"
                  placement="top"
                  :enterable="false"
                >
                  <el-button
                    type="danger"
                    @click="deleteSelect(scope.row)"
                    icon=""
                    size="mini"
                    >删除</el-button
                  >
                </el-tooltip>
              </template>
            </el-table-column>
          </el-table>
        </el-col>
      </el-row>
       <el-row>
      <el-button>取消</el-button>
      <el-button type="primary">提交</el-button>
    </el-row>
    </div>
  </div>
</template>


<script>
import { QuestionList, updateAnswer, deleteQuestion } from "@/api/examApi.js";
export default {
  data() {
    const item = {
      date: "2016-05-02",
      name: "王小虎",
      address: "上海市普陀区金沙江路 1518 弄",
    };
    return {
      queryParam: {
        subject: "1",
        content: "",
        tag: "",
        status: "2",
        //当前页数
        pageIndex: 1,
        //当前页数据个数
        pageSize: 10,
        auth: "",
      },
      tableData: [],
      userscore: 0,
      selectData: [],
      selectsocre: 0,
    };
  },
  methods: {
    search() {
      this.listLoading = true;
      //alert(rank)
      //alert(username)
      //alert(JSON.stringify(this.queryParam))
      QuestionList(this.queryParam).then((response) => {
        //alert(JSON.stringify(response))
        const re = response;
        this.tableData = re.data;
        this.total = re.totalrecord;
        this.queryParam.pageIndex = re.totalpage;
        this.listLoading = false;
      });
    },
    submitSearch() {
      //alert(this.queryParam.subjectId)
      //this.$message('查询!')
      this.queryParam.pageIndex = 1;
      this.search();
    },
    checkSelectAdd(row) {
      //alert(this.checked)
      //alert(JSON.stringify(row))
      if (this.checked == true) {
        //selectsocre += 5
        this.selectData.push(row);
      } else {
      }
      alert(JSON.stringify(selectData));
    },
    deleteSelect(row) {
      let _this = this;
      for (let index in _this.selectData) {
        if (_this.selectData[index] == row) {
          _this.selectData.splice(index, 1);
        }
      }
    },
  },
};
</script>
 
<style>
.demo-checkbox {
  zoom: 150%;
}
</style>